<script>
export default {
  name: "itemList",
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    detail() {
      let item = this.item
      let showAddress = ''
      if (item.district_label) {
        // 原始字符串
        const address = item.district_label

        // 按斜杠分割字符串
        const parts = address.split('/');

        // 检查分割后的数组长度是否大于等于 3，如果是则保留区和后面的内容
        if (parts.length >= 3) {
          // 从索引为 2 开始取元素，然后用斜杠重新拼接
          showAddress = parts.slice(2).join('/');
        } else {
          // 如果长度小于 3，直接使用原始地址
          showAddress = address;
        }
      }
      let tagsList = []
      if (item.tags) {
        tagsList = item.tags.split(',').filter(item => item)
      }

      let tagList = []
      if (item.tags) {
        tagList = item.tags.split(',').filter(item => item)
      }
      return {
        ...item,
        total_price: item.price,
        unit_price: item.day_price,
        showAddress: showAddress.replaceAll('/',  ' - '),
        tagList
      }
    },
  },
  methods: {
    handleDetail(item) {
      uni.navigateTo({
        url: '/pages/house/detail?id=' + item.id
      })
    },
  }
}
</script>

<template>
  <view class="house-item" @click="handleDetail(item)">
    <image class="house-image" :src="detail.post_url" mode="widthFix" />
    <view class="house-info">
      <text class="house-title">{{ detail.building_name }}</text>
      <view class="house-detail" style="margin: 6rpx 0">
        <text class="location">{{ detail.showAddress }}</text>
      </view>
      <view class="house-detail">
        <text class="area">{{ detail.area }}m²</text>
        <view class="line"></view>
        <text class="type">{{ detail.decoration }}</text>
      </view>
      <view class="house-tags">
        <text class="tag" v-for="item in detail.tagList">{{ item }}</text>
      </view>
      <view class="house-price">
        <text class="unit-price">{{ detail.unit_price }}元/㎡/天</text>
        <text class="price">{{ detail.total_price }} <text class="unit">元/月</text></text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">

.house-item {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 24rpx;
  margin: 24rpx;
  display: flex;
  align-items: center;
}

.house-image {
  width: 240rpx;
  height: 100%;
  border-radius: 12rpx;
  margin-right: 32rpx;
  flex-shrink: 0;
}

.house-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.house-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.house-detail {
  display: flex;
  align-items: center;
}

.location, .area, .type {
  font-size: 14px;
  color: #666666;
}

.house-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6rpx;
}
.house-tags .tag {
  padding: 4rpx 8rpx;
  background: #f0f7ff;
  color: #2b85e4;
  border-radius: 2rpx;
  font-size: 20rpx;
  margin-bottom: 4rpx;
}
.line {
  height: 20rpx;
  width: 2rpx;
  background-color: #DCDCDC;
  margin: 0 24rpx;
}
.house-price {
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 24rpx;
  color: #FF6B6B;
  font-weight: bold;
}

.unit {
  font-size: 20rpx;
  color: #FF6B6B;
  margin-left: 4rpx;
}

.unit-price {
  font-size: 24rpx;
  color: #999999;
  margin-right: 24rpx;
}
</style>
